<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>File Upload</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="Upload">
    </form>
    <h2>Or Upload Base64 File</h2>
    <textarea id="base64-file" rows="10" cols="50"></textarea><br>
    <button onclick="uploadBase64()">Upload Base64</button>

    <script>
        function uploadBase64() {
            const file = document.getElementById('base64-file').value;
            fetch('/upload_base64', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ file: file })
            })
            .then(response => response.json())
            .then(data => alert(data.message))
            .catch(error => alert('Error: ' + error));
        }
    </script>
</body>
</html>